import { InfoCircleOutlined } from '@ant-design/icons';
import { Card, Col, Divider, Row, Table, Tooltip } from 'antd';
import { TinyArea } from '@ant-design/charts';
import React from 'react';
import numeral from 'numeral';
import type { TotalAnalyticChartsData } from '../data.d';

import NumberInfo from './NumberInfo';
import styles from '../style.less';

const columns = [
  {
    title: '地区',
    dataIndex: 'name',
    key: 'name',
    className: styles.alignRight,
  },
  {
    title: '用户数',
    dataIndex: 'num',
    key: 'num',
    sorter: (a: { num: number }, b: { num: number }) => a.num - b.num,
    className: styles.alignRight,
  },
];

const columns2 = [
  {
    title: '设备',
    dataIndex: 'name',
    key: 'name',
    className: styles.alignRight,
  },
  {
    title: '用户数',
    dataIndex: 'num',
    key: 'num',
    sorter: (a: { num: number }, b: { num: number }) => a.num - b.num,
    className: styles.alignRight,
  },
];

const visit_data_fake = [
  {
    x: '2023-03-17',
    y: 15,
  },
  {
    x: '2023-03-18',
    y: 2,
  },
  {
    x: '2023-03-19',
    y: 6,
  },
  {
    x: '2023-03-20',
    y: 8,
  },
  {
    x: '2023-03-21',
    y: 11,
  },
  {
    x: '2023-03-22',
    y: 7,
  },
  {
    x: '2023-03-23',
    y: 11,
  },
];

const visit_data_fake2 = [
  {
    x: '2023-03-17',
    y: 1,
  },
  {
    x: '2023-03-18',
    y: 6,
  },
  {
    x: '2023-03-19',
    y: 4,
  },
  {
    x: '2023-03-20',
    y: 8,
  },
  {
    x: '2023-03-21',
    y: 3,
  },
  {
    x: '2023-03-22',
    y: 7,
  },
  {
    x: '2023-03-23',
    y: 2,
  },
];

const TopSearch = ({
  loading,
  visitData,
}: {
  loading: boolean;
  visitData: TotalAnalyticChartsData;
}) => (
  <Card
    loading={loading}
    bordered={false}
    title="人群分析"
    style={{
      height: '100%',
    }}
  >
    <Row gutter={68}>
      <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
        <NumberInfo
          subTitle={
            <span>
              总访客与今日新增
              <Tooltip title="以IP去重">
                <InfoCircleOutlined style={{ marginLeft: 8 }} />
              </Tooltip>
            </span>
          }
          gap={8}
          total={numeral(visitData.user_charts?.uv).format('0,0')}
          status="up"
          subTotal={visitData.user_charts?.uv_today}
        />
        <TinyArea xField="x" height={45} forceFit yField="y" smooth data={visit_data_fake} />
        <Divider />
        <Table<any>
          rowKey={(record) => record.name}
          size="small"
          columns={columns}
          dataSource={visitData.area_charts}
          pagination={false}
        />
      </Col>
      <Col sm={12} xs={24} style={{ marginBottom: 24 }}>
        <NumberInfo
          subTitle={
            <span>
              小程序总访客与今日新增
              <Tooltip title="指标说明">
                <InfoCircleOutlined style={{ marginLeft: 8 }} />
              </Tooltip>
            </span>
          }
          total={visitData.user_charts?.mp_uv}
          status="up"
          subTotal={visitData.user_charts?.mp_uv_today}
          gap={8}
        />
        <TinyArea xField="x" height={45} forceFit yField="y" smooth data={visit_data_fake2} />
        <Divider />
        <Table<any>
          rowKey={(record) => record.name}
          size="small"
          columns={columns2}
          dataSource={visitData.device_charts}
          pagination={false}
        />
      </Col>
    </Row>
  </Card>
);

export default TopSearch;
